<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线反馈</title>
    <link rel="stylesheet" href="css/gxxjkefu-normalize.css">
    <link rel="stylesheet" href="css/model.css">
    <link rel="stylesheet" href="css/pager.css">
    <style>
        .notice_info{
            padding: 25px 0 3%;
            line-height: 35px;
            color: #979797;
            float: left;
            width: 100%;
            background: #ffffff;
        }
        .feedback_ul{
            text-align: center;
            margin: 0 auto 50px;
        }
        .feedback_ul li{
            text-align: center;
            display: inline-block;
            margin: 0 30px;
        }
        .feedback_ul li a{
            color: black;
            padding: 0 0 10px;
        }
        .feedback_ul  .a_active{
            color: #57bee9;
            border-bottom: solid 2px #57bee9;
        }
        .search_table thead{
            background: #f0f8fa;
            border: none;
        }
        .table{
            color: #000000;
            margin: 0 auto;
            width: 100% !important;
            text-align: center;
        }
        .search_table input{
            background: none;
            border: none;
        }
        .table>thead>tr>th {
            border-bottom:none !important;
            text-align: center !important;
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
            border-top: 1px solid #f0f8fa !important;
            text-align: center !important;
        }
        .remark_div{
            color: black;
            height: 340px;
            width: 90%;
            margin: 200px auto 0;
            position: relative;
        }
        .remark_div input{
            position: absolute;
            right: 0;
            bottom: 0;
            background: #ff815a;
            border-radius: 3px;
            border: none;
            color: white;
            margin-top: 20px;
            width: 200px;
            height: 40px;
        }
        .remark_div textarea{
            background: #f5f5f5;
            border: none;
            padding: 1%;
        }
    </style>
</head>
<body>
<div id="main_C" style="float: left;width: 100%">
    <div class="title_info">
        <span>逾期管理</span>
    </div>
    <div class="white_bgColor notice_info">
        <!--顶部选项-->
        <ul class="feedback_ul">
            <li><a href="javascript:void(0);" class="a_active">我跟进的订单</a></li>
            <li><a href="javascript:void(0);">逾期已还款</a></li>
            <li><a href="javascript:void(0);">逾期未还款</a></li>
            <li><a href="javascript:void(0);">已移交订单</a></li>
        </ul>
        <div class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>手机号码</th>
                    <th>还款订单</th>
                    <th>还款金额</th>
                    <th>应还款时间</th>
                    <th>逾期天数</th>
                    <th>逾期罚金</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>林元杰</td>
                    <td>138****1243</td>
                    <td>R3249867982</td>
                    <td>600</td>
                    <td>2017-12-21 19:20</td>
                    <td>6天</td>
                    <td>12.00</td>
                    <td class="red_color">未还款</td>
                    <td>
                        <input class="remark_btn blue_color" type="button" value="备注"/>
                        |
                        <input class="green_color" type="button" value="工单"/>
                    </td>
                </tr>
                </tbody>
            </table>
            <div style="display: none" class="remark_div">
                <p>备注</p>
                <textarea name="a" style="width:98%;height:210px;"></textarea>
                <input type="button" value="提交"/>
            </div>
        </div>
        <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>手机号码</th>
                    <th>还款订单</th>
                    <th>还款金额</th>
                    <th>应还款时间</th>
                    <th>逾期天数</th>
                    <th>逾期罚金</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>林元杰</td>
                    <td>138****1243</td>
                    <td>R3249867982</td>
                    <td>600</td>
                    <td>2017-12-21 19:20</td>
                    <td>6天</td>
                    <td>12.00</td>
                    <td class="red_color">逾期已还款</td>
                    <td>
                        <input class="remark_btn blue_color" type="button" value="备注"/>
                        |
                        <input class="green_color" type="button" value="工单"/>
                    </td>
                </tr>
                </tbody>
            </table>
            <div style="display: none" class="remark_div">
                <p>备注</p>
                <textarea name="a" style="width:98%;height:210px;"></textarea>
                <input type="button" value="提交"/>
            </div>
        </div>
        <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>手机号码</th>
                    <th>还款订单</th>
                    <th>还款金额</th>
                    <th>应还款时间</th>
                    <th>逾期天数</th>
                    <th>逾期罚金</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>林元杰</td>
                    <td>138****1243</td>
                    <td>R3249867982</td>
                    <td>600</td>
                    <td>2017-12-21 19:20</td>
                    <td>6天</td>
                    <td>12.00</td>
                    <td class="red_color">逾期未还款</td>
                    <td>
                        <input class="remark_btn blue_color" type="button" value="备注"/>
                        |
                        <input class="green_color" type="button" value="工单"/>
                    </td>
                </tr>
                </tbody>
            </table>
            <div style="display: none" class="remark_div">
                <p>备注</p>
                <textarea name="a" style="width:98%;height:210px;"></textarea>
                <input type="button" value="提交"/>
            </div>
        </div>
        <div style="display: none" class="search_table">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>手机号码</th>
                    <th>还款订单</th>
                    <th>还款金额</th>
                    <th>应还款时间</th>
                    <th>逾期天数</th>
                    <th>逾期罚金</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>林元杰</td>
                    <td>138****1243</td>
                    <td>R3249867982</td>
                    <td>600</td>
                    <td>2017-12-21 19:20</td>
                    <td>6天</td>
                    <td>12.00</td>
                    <td class="red_color">已移交订单</td>
                    <td>
                        <input class="remark_btn blue_color" type="button" value="备注"/>
                        |
                        <input class="green_color" type="button" value="工单"/>
                    </td>
                </tr>
                </tbody>
            </table>
            <div style="display: none" class="remark_div">
                <p>备注</p>
                <textarea name="a" style="width:98%;height:210px;"></textarea>
                <input type="button" value="提交"/>
            </div>
        </div>
    </div>
</div>

<script src="js/pager.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script>
    /*备注*/
    $(document).ready(function () {
        $(".remark_btn").click(function () {
            $(".remark_div").fadeToggle(500);
        });
    });
    //选项卡切换
    $(document).ready(function () {
        $(".feedback_ul li").click(function () {
            $(".search_table").hide().eq($(this).index()).show();
            $(".feedback_ul").find("li a").removeClass("a_active");
            $(this).children("a").addClass("a_active");
        });
    });
</script>
</body>
</html>